<template>
  <div class="rank-list">
    <div v-for="(item, index) in rankData" :key="index" class="rank-item">
      <span class="rank-number" :class="{ 'top-three': index < 3 }">{{ index + 1 }}</span>
      <span class="area-name">{{ item.name }}</span>
      <div class="metrics">
        <span class="jam-index">拥堵指数</span>

        <el-progress
          :percentage="getPercentage(item.value)"
          :color="getColor(item.value)"
          :format="() => `${item.value.toFixed(1)}`"
          :stroke-width="8"
        />
        <span class="speed">平均：{{ item.speed }}km/h</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { getDistrictRank } from "@/apis/TrafficIndicators";

const props = defineProps<{
  type: string;
}>();

const rankData = ref([]);

// 获取百分比值（用于进度条显示）
const getPercentage = (value: number) => {
  return Math.min(value * 30, 100); // 将拥堵指数转换为合适的百分比范围
};

// 获取颜色
const getColor = (value: number) => {
  if (value >= 2) return "#F56C6C";
  if (value >= 1.5) return "#E6A23C";
  return "#67C23A";
};

// 获取排名数据
const fetchRankData = async () => {
  try {
    const { success, data } = await getDistrictRank(props.type);
    if (success) {
      rankData.value = data;
    }
  } catch (error) {
    console.error("获取排名数据失败:", error);
  }
};

// 监听类型变化
watch(
  () => props.type,
  () => {
    fetchRankData();
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.rank-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 10px;

  .rank-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }

    .rank-number {
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      background-color: #f5f7fa;
      border-radius: 4px;
      margin-right: 12px;
      font-size: 14px;
      color: #909399;

      &.top-three {
        background-color: #409eff;
        color: #fff;
      }
    }

    .area-name {
      width: 80px;
      margin-right: 12px;
      color: #606266;
      font-size: 14px;
    }

    .metrics {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 10px;

      :deep(.el-progress) {
        flex: 1;
        margin-right: 8px;
      }

      .jam-index {
        font-size: 12px;
        color: #909399;
      }

      .speed {
        font-size: 12px;
        color: #909399;
        width: 100px;
      }
    }
  }
}
</style>
